// 项目默认配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
const resolve = (dir: string) => path.join(__dirname, dir)
// elementui按需导入配置
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  // 路劲命名
  resolve: {
		alias: {
			'@': resolve('src')
		}
	},
  // 开发环境的服务配置
  server: {
    // 端口号
    port: 3002,
    // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    // 服务器启动时自动在浏览器中打开应用程序,当此值为字符串时，会被用作 URL 的路径名
    open: true,
    // 自定义代理规则
    // 记住：代理只是在生产环境中需要 ！ 上线的时候后端跟前端配置在同一个服务器里面不需要代理 ！
    proxy: {
      // 选项写法例子
      // "/api": {
      //   target: "http://www.baidu.com",
      //   changeOrigin: true,
      //   rewrite: (path) => path.replace(/^\/api/, ""),
      // },

      "^/api": {
         target: "http://120.24.64.5:8088/mall-admin",
         changeOrigin: true,
         // 第一步： 先匹配/api接口 从localhost:3000/api/admin/info  转发到  http://120.24.64.5:8088/mall-admin/api/admin/info
         // 第二步： 重写 path(http://120.24.64.5:8088/mall-admin/api/admin/info) 
         //         替换以 '/api' 开头字符串 为 ''   '/api/admin/info' =>  '/admin/info'
         // 最后访问的路径实际上就是  http://120.24.64.5:8088/mall-admin/admin/info
         rewrite: (path) => path.replace(/^\/api/, ""),
      },

      // '^/mall-admin':{
      //   target: "http://120.24.64.5:8088",
      //   changeOrigin: true,
      // }

      // 小结： 代理匹配的那个前缀可以灵活应用，在这里我们使用了一个 '/api'， 那么在axios中我们就需要给一个/api前缀让代理识别 
      //       如果后端有特定的前缀时我们也可以利用那个前缀来匹配代理,如上面的 ^/mall-admin，如果用这个我们就可以省去重写path的操作
    },
  }
})
